<template>
    <div v-show="SysteminfoPanel" style="width: auto; height: auto;">
            <el-card style="width: 50%; float: left; margin-right: 20px; height: auto;" v-if="SystemInfo != null">
              <el-menu>
                <el-menu-item>
                  <p style="float: left;">系统:</p>
                  <p style="width: 100%; text-align: right;">
                    {{ SystemInfo.OsName }}
                    <img v-if="SystemInfo.OsName === 'Windows 11'" src="../src/icon/win11.png" style="width: 25px; height: 25px; padding: 0px; text-align: right; vertical-align: middle;"/>
                    <img v-else src="../src/icon/win8.png" style="width: 25px; height: 25px; padding: 0px; text-align: right; vertical-align: middle;"/>
                  </p>
                </el-menu-item>
                <el-menu-item>
                  <p style="float: left;">内核版本:</p>
                  <p style="width: 100%; text-align: right;">
                    {{ SystemInfo.OsVersion }}
                  </p>
                </el-menu-item>
                <el-menu-item>
                  <p style="float: left;">硬件架构:</p>
                  <p style="width: 100%; text-align: right;">
                    {{ SystemInfo.OsArch }}
                  </p>
                </el-menu-item>
                <el-menu-item>
                  <p style="float: left;">BIOS:</p>
                  <p style="width: 100%; text-align: right;">
                    {{ SystemInfo.MotherBoard }}
                  </p>
                </el-menu-item>
                <el-sub-menu index="1">
                  <template #title>
                    <span>CPU</span>
                  </template>
                  <el-menu-item>
                    <p style="float: left;">Vendor:</p>
                    <div style="width: 100%; text-align: right;">
                      <img v-if="SystemInfo.CpuFactory === 'AMD'" src="../src/icon/amd.png" style="width: 25px; height: 25px; padding: 0px; text-align: right; vertical-align: middle;"/>
                      <img v-else-if="SystemInfo.CpuFactory === 'Intel'" src="../src/icon/intel.png" style="width: 25px; height: 25px; padding: 0px; text-align: right; vertical-align: middle;"/>
                      <p v-if="SystemInfo.CpuFactory != 'AMD' && SystemInfo.CpuFactory != 'Intel'">{{ SystemInfo.CpuFactory }}</p>
                    </div>
                  </el-menu-item>
                  <el-menu-item>
                    <p style="float: left;">型号:</p>
                    <div style="width: 100%; text-align: right;">
                      <p>{{ SystemInfo.Cpu }}</p>
                    </div>
                  </el-menu-item>
                  <el-menu-item>
                    <p style="float: left;">核心:</p>
                    <div style="width: 100%; text-align: right;">
                      <p>{{ SystemInfo.CpuCore }}</p>
                    </div>
                  </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                  <template #title>
                    <span>GPU</span>
                  </template>
                  <el-menu-item v-for="(gpu,index) in SystemInfo.GraphicCard" :key="gpu">
                    <p style="float: left;">显卡{{ index + 1 }}</p>
                    <div style="width: 100%; text-align: right;">
                      <p>{{ gpu }}</p>
                    </div>
                  </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="3">
                  <template #title>
                    <span>RAM</span>
                  </template>
                  <el-menu-item v-for="(ram,index) in SystemInfo.Ram" :key="ram">
                    <p style="float: left;">插槽{{ index + 1 }}</p>
                    <div style="width: 100%; text-align: right;">
                      <p>{{ ram }}</p>
                    </div>
                  </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="4">
                  <template #title>
                    <span>ROM</span>
                  </template>
                  <el-menu-item v-for="(rom,index) in SystemInfo.Disk" :key="rom" style="height: auto;">
                    <p style="float: left;">硬盘{{ index + 1 }}</p>
                    <div style="width: 100%; 
                                text-align: right;
                                height: auto;  
                                word-wrap:break-word;  
                                word-break:break-all;  
                                overflow:hidden;">
                      <p>{{ rom }}</p>
                    </div>
                  </el-menu-item>
                </el-sub-menu>
              </el-menu>
            </el-card>
            <el-card style="width: 45%; height: auto; float: left;">
              <el-row>
                <div style="float: left; width: auto; padding-left: 15px;">
                  <el-progress id="CpuBoard" type="dashboard" :width="200" :height="200" :percentage="CpuPercentage" :color="colors" />
                  <p style="text-align: center;">CPU占用</p>
                </div>
                <div style="float: left; width: auto; padding-left: 50px;">
                  <el-progress id="MemBoard" type="dashboard" :width="200" :height="200" :percentage="MemPercentage" :color="colors" />
                  <p style="text-align: center;">内存占用</p>
                </div>
                <div v-for="(disk,index) in DiskPercentage" :key="disk" style="width: 100%;">
                  <br>
                  <p>硬盘分区{{ index + 1 }}</p>
                  <el-progress :text-inside="false" :stroke-width="15" :percentage="disk" :color="colors" />
                </div>
              </el-row>
            </el-card>
            <el-card style="width: 45%; height: 100%; float: left; margin-top: 20px; padding-bottom: 20px;" v-if="UserManagerButton">
              <div style="float: left; width: 33%;">
                <span>
                  <el-button type="primary" text @click="refresh" style="width: 100%; height: 100px; border-width: 0px; text-align: center;">
                    <el-icon size="50px" style="text-align: center"><Refresh /></el-icon>
                  </el-button>
                  <p style="text-align: center;">刷新</p>
                </span>
              </div>
              <div style="float: left; width: 33%;">
                <span>
                  <el-button type="danger" text @click="refreshBack" style="width: 100%; height: 100px; border-width: 0px; text-align: center;">
                    <el-icon size="50px" style="text-align: center"><RefreshRight /></el-icon>
                  </el-button>
                  <p style="text-align: center;">后端重启</p>
                </span>
              </div>
              <div style="float: left; width: 33%;">
                <span>
                  <el-button type="danger" text @click="shutDown" style="width: 100%; height: 100px; border-width: 0px; text-align: center;">
                    <el-icon size="50px" style="text-align: center"><SwitchButton /></el-icon>
                  </el-button>
                  <p style="text-align: center;">后端关机</p>
                </span>
              </div>
            </el-card>
          </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
    setup() {
        
    },
})
</script>
